<template>
  <div class="backgroung-img">
    <div class="inputStyle">
        <input type="text" v-model="taskTitle" placeholder="请输入搜索内容" >
        <div class="search-icon"><img src="../../assets/homeimages/搜索.svg" alt=""></div>
    </div>
    <div class="tabBar2">
      <div class="item">
        <img class="img" src="../../assets/homeimages/my-policy.png" alt="">
        <div class="tagging">我的保单</div>
      </div>
      <div class="item">
         <img class="img" src="../../assets/homeimages/settlement.png" alt="">
        <div class="tagging">我要理赔</div>
      </div>
      <div class="item">
        <img class="img" src="../../assets/homeimages/my-info.png" alt="">
        <div class="tagging">个人信息</div>
      </div>
      <div class="item">
         <img class="img" src="../../assets/homeimages/more-services.png" alt="">
        <div class="tagging">更多服务</div>
      </div>
    </div>
    <div class="box-content">
      <div class="selected">
        <img src="../../assets/homeimages/title-icon.svg" alt="">
        <h3>保障精选</h3>
      </div>
      <div class="listitem" v-for="i in 8" :key="i">
        <div class="leftimg">
           <img  src="../../assets/homeimages/my-info.png" alt=""/>
        </div>
        <div class="rightcontent">
            <div class="maintitle">联听的三分大赛飞洒发的三分大是赛飞洒发的分大赛</div>
            <div class="subtitle">描述懂法守法三防三防</div>
            <div class="category">
              <div class="borderblue">120种重症</div>
              <div class="borderred">120种重症</div>
              <div class="borderred">120种重症</div>
            </div>
            <div class="price"> $8898起</div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>

export default {
  name: "HomePage",
  components: {
  },
};
</script>

<style scoped>
.backgroung-img{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: 100vh;
   background-image: url(../../assets/homeimages/首页banner.svg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-color: #f5f5f5;
}
.inputStyle{
  margin-top: 10px;
  height: 40px;
  width: 96%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputStyle input{
  width: 100%;
  height: 40px;
  border-radius: 30px;
  text-align: left;
  text-indent: 48px;
  
}
.inputStyle input::-webkit-input-placeholder{
  color:#999;
  font-size: 14px;
}
 .search-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 20px;
  width: 30px;
  height: 20px;
  top:22px;
  left: 1px;
  border-right: 1px solid #b9b9b9;
  position: absolute;
}
.search-icon img{
   width: 13px;
  height: 13px;
  text-align: center;
}
.tabBar {
  border-top: 1px solid #F2F3F5;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.tabBar2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #FFFFFF;
  border-radius: 8px;
  margin-top: 27%;
  height: 94px;
  width: 88%;
  box-shadow: 1px 1px 1px #888888;
}
.item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
}
.item img{
  width: 50%;
}
.item .tagging{
  margin-top: 10px;
  font-size: 13px;
}

.box-content{
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 50%;
  width: 93%;
  background-color: #FFFFFF;
  margin-top: 20px;
  border-radius: 8px;
 
}
.selected{
  display: flex;
  flex-direction: row;
}
.selected img{
  width: 4px;
}
.selected h3{
  margin-left: 6px;
  color:blue;
  font-size: 15px;
}

.listitem{
  display: flex;
  flex-direction: row;
  height: 120px;
   margin-bottom: 10px;
}
.leftimg{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  flex: 4;
}
.leftimg img{
  width: 99%;
  height: 99%;

}
.rightcontent{
  margin-left: 4px;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  flex: 7;
}
/* 超过两行做省略处理 */
.maintitle{
  height: 40%;
  font-size: 14px;
  font-weight: 600;
  color: #6a6a6a;
  line-height: 22px;
}
.subtitle{
  vertical-align: center;
  height: 20%;
  font-size: 12px;
  color: #999999;
}
.category{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 20%;
}
.price{
  height: 20%;
  font-size: 16px;
  color: red;
}
.borderred{
  padding: 1px 2px;
  background-color: #FFFFFF;
  border: 1px solid red;
  color: red;
  font-size: 10px;
}
.borderblue{
  padding: 1px 2px;
  background-color: #FFFFFF;
  border: 1px solid blue;
  color: blue;
  font-size: 10px;
}
</style>
